<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-- <table align="center" border="1" width="500px" height="300px" cellpadding="10px" cellspacing="0px"
        cellpadding="0px">
        <caption>
            九月账单
        </caption>
        <tr>
            <th>银行卡余额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table> -->

    <script>
        let total = prompt('请输入银行卡余额');
        let spend1 = prompt('请输入本月水费支出金额');
        let spend2 = prompt('请输入本月电费支出金额');
        let spend3 = prompt('请输入本月网费支出金额');
        let newtotal = +total - (+spend1 + +spend2 + +spend3);
        document.write(`
            <table align="center" border="1" width="800px" height="400px" cellpadding="10px" cellspacing="0px" cellpadding="0px">
                <caption>
                    九月账单
                </caption>
                <tr>
                    <th>银行卡余额</th>
                    <th>水费</th>
                    <th>电费</th>
                    <th>网费</th>
                    <th>银行卡余额</th>
                </tr>
                <tr>
                    <td>${total}元</td>
                    <td>${spend1}元</td>
                    <td>${spend2}元</td>
                    <td>${spend3}元</td>
                    <td>${newtotal}元</td>
                </tr>
            </table>`
        );
    </script>
</body>

</html>